<!-- 首页精选内容区域 -->
<template>
  <view class="featured-content" :style="contentStyle">
    <!-- 标题区域 -->
    <view class="featured-header">
      <view class="header-left">
        <text class="section-title">{{ sectionTitle }}</text>
      </view>
    </view>

    <!-- 精选卡片区域 -->
    <view class="featured-cards">
      <view 
        class="featured-card" 
        v-for="(item, index) in featuredItems" 
        :key="index"
        @tap="onItemClick(item)"
      >
        <view class="card-image-wrapper">
          <image class="card-image" :src="sheep.$url.cdn(item.imgUrl)" mode="aspectFill" />
        </view>
        
        <view class="card-content">
          <view class="card-text-wrapper">
            <view class="card-price" v-if="item.price">
              <text class="price-text">{{ item.price }}</text>
            </view>
            <view class="card-title">{{ item.title }}</view>
            <view class="card-subtitle" v-if="item.subtitle && item.subtitle.trim()">
              <text class="subtitle-text">{{ item.subtitle }}</text>
            </view>
          </view>
          
          <!-- 装饰图标 - 放在右侧，垂直居中 -->
          <view class="card-decoration" v-if="item.title === '会员中心'">
            <text class="decoration-icon">⭐</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    sectionTitle: {
      type: String,
      default: '精选内容'
    },
    sectionSubtitle: {
      type: String,
      default: ''
    },
    listTitle: {
      type: String,
      default: '热门车型'
    },
    showUpload: {
      type: Boolean,
      default: true
    },
    layoutType: {
      type: String,
      default: 'grid',
      validator: (value) => ['grid', 'list'].includes(value)
    },
    featuredItems: {
      type: Array,
      default: () => [
        {
          id: 1,
          title: '法拉利488',
          imgUrl: 'https://picsum.photos/400/300?text=法拉利488',
          price: '¥3900/天起',
          url: '/pages/goods/index?id=1'
        },
        {
          id: 2,
          title: '三亚狂嗨指南',
          subtitle: '全系高端体验',
          imgUrl: 'https://picsum.photos/400/300?text=三亚狂嗨指南',
          url: '/pages/goods/index?id=2'
        }
      ]
    },
    moreUrl: {
      type: String,
      default: '/pages/goods/list'
    },
    bgColor: {
      type: String,
      default: '#f5f6fa'
    },
    padding: {
      type: String,
      default: '20rpx'
    },
    borderRadius: {
      type: String,
      default: '20rpx'
    }
  });

  const emits = defineEmits(['itemClick', 'moreClick']);

  const contentStyle = computed(() => ({
    backgroundColor: props.bgColor,
    padding: props.padding,
    borderRadius: props.borderRadius
  }));

  const onMoreClick = () => {
    emits('moreClick');
    if (props.moreUrl) {
      sheep.$router.go(props.moreUrl);
    }
  };

  const onItemClick = (item) => {
    emits('itemClick', item);
    
    // 根据contentType处理不同的点击行为
    if (item.contentType === 'text' && item.richText) {
      // 如果是文本类型且有富文本内容，跳转到富文本详情页
      uni.navigateTo({
        url: `/pages/public/richtext?content=${encodeURIComponent(item.richText)}&title=${encodeURIComponent(item.title || '详情')}`
      });
    } else if (item.url) {
      // 如果是广告类型或其他类型，按原逻辑跳转
      sheep.$router.go(item.url);
    }
  };

</script>

<style lang="scss" scoped>
.featured-content {
  margin: 20rpx;
  background: #f5f6fa;
  border-radius: 0;
  box-shadow: none;

  .featured-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0 16rpx;

    .header-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .section-title {
        font-size: 40rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 8rpx;
      }

      .section-subtitle {
        font-size: 24rpx;
        color: #999999;
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;

      .more-text {
        font-size: 24rpx;
        color: #666666;
        margin-right: 6rpx;
      }

      .more-arrow {
        font-size: 20rpx;
        color: #666666;
        transition: transform 0.3s ease;
      }

      &:active {
        opacity: 0.7;
        
        .more-arrow {
          transform: translateX(4rpx);
        }
      }
    }
  }

  .featured-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12rpx;

    .featured-card {
      background: #ffffff;
      border-radius: 16rpx;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      &:active {
        transform: scale(0.98);
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      }

      .card-image-wrapper {
        position: relative;
        height: 200rpx;

        .card-image {
          width: 100%;
          height: 100%;
        }
      }

      .card-content {
        padding: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60rpx;  // 设置最小高度，避免溢出

        .card-text-wrapper {
          flex: 1;
          display: flex;
          flex-direction: column;

          .card-price {
            margin-bottom: 8rpx;

            .price-text {
              font-size: 24rpx;
              font-weight: 600;
              color: #ff4757;
            }
          }

          .card-title {
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
            line-height: 1.3;
            margin-bottom: 4rpx;
          }

          .card-subtitle {
            .subtitle-text {
              font-size: 22rpx;
              color: #999999;
              line-height: 1.2;
            }
          }
        }

        .card-decoration {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32rpx;
          height: 32rpx;
          background: linear-gradient(135deg, #ffd700, #ffed4e);
          border-radius: 50%;
          box-shadow: 0 2rpx 6rpx rgba(255, 215, 0, 0.3);
          margin-left: 12rpx;
          flex-shrink: 0;  // 防止被压缩

          .decoration-icon {
            font-size: 18rpx;
            line-height: 1;
          }
        }
      }
    }
  }
}

@media (max-width: 750rpx) {
  .featured-content {
    margin: 15rpx;

    .featured-header {
      padding: 16rpx 0 12rpx;

      .header-left {
        .section-title {
          font-size: 26rpx;
          margin-bottom: 6rpx;
        }

        .section-subtitle {
          font-size: 22rpx;
        }
      }

      .header-right {
        .more-text {
          font-size: 22rpx;
        }

        .more-arrow {
          font-size: 18rpx;
        }
      }
    }

    .featured-cards {
      gap: 10rpx;

      .featured-card {
        .card-image-wrapper {
          height: 160rpx;
        }

        .card-content {
          padding: 14rpx;
          min-height: 50rpx;

          .card-text-wrapper {
            .card-price {
              .price-text {
                font-size: 22rpx;
              }
            }

            .card-title {
              font-size: 24rpx;
              margin-bottom: 3rpx;
            }

            .card-subtitle {
              .subtitle-text {
                font-size: 20rpx;
              }
            }
          }

          .card-decoration {
            width: 28rpx;
            height: 28rpx;
            margin-left: 10rpx;

            .decoration-icon {
              font-size: 16rpx;
            }
          }
        }
      }
    }
  }
}
</style>
